<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>文章</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../common/css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../common/css/global.css" />
		<link rel="stylesheet" type="text/css" href="css/article.css"/>
		<link rel="stylesheet" type="text/css" href="../common/css/icons-extra.css"/>
		<script src="../common/js/mui.min.js"></script>
		<script src="../common/js/jquery-2.1.0.js"></script>

	</head>

	<body>
		<header id="header" class="mui-bar mui-bar-nav">
			<h1 class="mui-title">文章</h1>
			<a class="mui-icon mui-action-back mui-icon-back mui-pull-left"></a>
		</header>
		<a class="mui-content">
			<ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
		            	<a href="#">
		                    <div class="mui-media-body">全部精选</div>
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
		            	<a href="#">
		                    <div class="mui-media-body">美食札记</div>
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
		            	<a href="#">
		                    <div class="mui-media-body">时尚美容</div>
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
		            	<a href="#">
		                    <div class="mui-media-body">影视文娱</div>
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
		            	<a href="#">
		                    <div class="mui-media-body">住家生活</div>
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
		            	<a href="#">
		                    <div class="mui-media-body">绘画手作</div>
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
		            	<a href="#">
		                    <div class="mui-media-body">旅行游记</div>
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
		            	<a href="#">
		                    <div class="mui-media-body">美图摄影</div>
		            	</a>
		            </li>
		        </ul> 
		        
				<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
			        <li class="mui-table-view-cell">
			            <a href="javascript:;">
			            	<img class="mui-media-object mui-pull-right" src="images/life2.jpg">
			                <div class="mui-media-body">
			                    <h4 class="mui-ellipsis-2">双11我的购物清单&必逛店铺&海外党如何买双11</h4>
			                    <p class="mui-h6 mui-ellipsis">文章|Zee加乌乔
			                    	<span class="mui-icon-extra mui-icon-extra-heart-filled mui-pull-right"></span>
			                    </p>
			                    
			                </div>
			                
			            </a>
			        </li>
			        <li class="mui-table-view-cell">
			            <div class="mui-table">
			                <div class="mui-table-cell mui-col-xs-5">
			                    <h4 class="mui-ellipsis-2">视频|有饰品和没饰品差别这么大？</h4>
			                    <p class="mui-h6 mui-ellipsis">文章|Livec
			                    	<span class="mui-icon-extra mui-icon-extra-heart-filled mui-pull-right"></span>
			                    </p>
			                </div>
			                <div class="mui-table-cell mui-col-xs-2">
			                    <span class="mui-h5">12:25</span>
			                    
			                </div>
			            </div>
			        </li>
			        <li class="mui-table-view-cell">
			            <div class="mui-table">
			                <div class="mui-table-cell mui-col-xs-5">
			                    <h4 class="mui-ellipsis-2">动物园那么好玩，你干嘛不去啊？</h4>
			                    <p class="mui-h6 mui-ellipsis">文章|陈sober
			                    	<span class="mui-icon-extra mui-icon-extra-heart-filled mui-pull-right"></span>
			                    </p>
			                </div>
			                <div class="mui-table-cell mui-col-xs-2">
			                    <span class="mui-h5">12:25</span>
			                   
			                </div>
			            </div>
			        </li>
			        <li class="mui-table-view-cell">
			            <div class="mui-table">
			                <div class="mui-table-cell mui-col-xs-5">
			                    <h4 class="mui-ellipsis-2">一家三口的包包秘密大公开</h4>
			                    <p class="mui-h6 mui-ellipsis">文章|DecJL
			                    	<span class="mui-icon-extra mui-icon-extra-heart-filled mui-pull-right"></span>
			                    </p>
			                </div>
			                <div class="mui-table-cell mui-col-xs-2">
			                    <span class="mui-h5">12:25</span>
			                     
			                </div>
			            </div>
			        </li>
				</ul>
		</div>
	</body>

</html>